<template>
  <el-dialog
    title="请选择产品分类"
    :visible.sync="dialogVisible"
    width="350px">
    <div id="choose-product-classify-level1">
      <div class="item" v-for="(item,index) in systemClassifyName" :key="index" v-text="item.name" :class="{curr:item.name===classifyName_1}" @click="changeLevel_1(item.name)"></div>
      <div class="c"></div>
    </div>

    <div id="choose-product-classify-dialog-content">
      <div class="item" v-for="(item,index) in classifyName_2_Arr" :key="index">
        <div class="title" v-text="item.name"></div>
        <div class="item">
          <div class="item" v-for="(_item,_index) in item.subList" :key="_index" v-text="_item.name" :class="{curr:_item.id===currClassifyId}" @click="choose(_item)">三级分类1</div>
          <div class="c"></div>
        </div>
      </div>
      <div class="c"></div>
    </div>

    <div align="center">
      <el-button type="danger" @click="choose('')">清空</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ChooseProductClassifyDialog',
  data: function () {
    return {
      systemClassifyName: [],
      classifyName_1: '',
      classifyName_2_Arr:[],
      dialogVisible: false,
      currClassifyId: '',
      callback: false
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('ChooseProductClassifyDialogCallBus', function (currClassifyId,callback) {
      $this.getShopClassify(function () {
        $this.currClassifyId=currClassifyId
        $this.initClassifyArr_2();
        $this.dialogVisible = true
        $this.callback = callback
        $this.$forceUpdate()
      })
    })
  },
  methods: {
    getShopClassify (callback) {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Product/getAllProductClassify', {}, function (data) {
        $this.systemClassifyName=data
        $this.$forceUpdate()
        callback()
      }, function (response) {
        $this.$message.success(response.message)
        $this.currLoading = false
        $this.$forceUpdate()
      })
    },
    changeLevel_1:function (name) {
      this.currClassifyId=-1
      this.classifyName_1=name
      this.initClassifyArr_2()
    },
    // 联动计算: 1级分类名称,对应下级数组
    initClassifyArr_2:function () {
      let $this=this
      $this.systemClassifyName.forEach(function (value, index) {
        value.subList.forEach(function (_value, _index) {
          _value.subList.forEach(function (__value,__index) {
            if (__value.id===$this.currClassifyId){
              $this.classifyName_1=value.name
            }
          })
        })
      })

      $this.systemClassifyName.forEach(function (value, index) {
        if (value.name===$this.classifyName_1){
          $this.classifyName_2_Arr=value.subList;
        }
      })
      $this.$forceUpdate()
    },
    // 选择3级分类
    choose: function (item) {
      if (typeof this.callback==='function'){
        this.dialogVisible=false
        this.currClassifyId=item.id
        this.callback(item)
      }
    }
  }
}
</script>

<style scoped>

</style>
